<template>
  <van-nav-bar left-arrow fixed title="商品详情" @click-left="onBack">
    <template #right>
      <van-icon name="ellipsis" />
    </template>
  </van-nav-bar>

  <div class="clear"></div>
  <div class="h50"></div>
  <div class="clear"></div>
  <div class="aui-m-slider">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="(thumb, index) in info.thumbs_cdn" :key="index">
        <img :src="thumb" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="clear"></div>
  <div class="clear"></div>
  <div class="detailbox">
    <h4>{{ info.name }}</h4>
    <div class="price">
      <em>￥</em>{{ info.price }}
      <font>已售{{ info.product_num }}件</font>
    </div>
  </div>
  <div class="clear"></div>
  <div class="allkbox"></div>
  <div class="clear"></div>
  <div class="detail">商品详情：</div>
  <div class="detailbox_2" v-html="info.content"></div>

  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" :to="{ path: '/order/cart/index', query: { action: 'cart' } }" />
    <van-action-bar-icon :icon="status == true ? 'star' : 'star-o'" @click="onColle" text="收藏" color="#ff5000" />
    <van-action-bar-button type="warning" @click="onCart" text="加入购物车" />
    <van-action-bar-button type="danger" @click="onBuy" text="立即购买" />
  </van-action-bar>

  <!-- 弹出框内容 -->
  <van-action-sheet v-model:show="show" round title="请选择商品信息">
    <div class="content">
      <van-card :title="info.name" class="goods-card">
        <!-- 图片 -->
        <template #thumb>
          <img :src="info.cover_cdn" alt="" />
        </template>
        <!-- 数量 -->
        <!-- <template #num>
          <van-stepper v-model="pronum" @change="onChange(item.id, item.pronum)" theme="round" button-size="22" disable-input />
        </template> -->

        <template #num>
          <span>购买数量：</span>
          <van-stepper v-model="num" @change="onChange" theme="round" button-size="22" disable-input />
        </template>

        <!-- 描述 -->
        <template #desc>
          <span
            >商品单价：<b style="color: #fe7923">￥{{ info.price }}</b></span
          >
        </template>
      </van-card>
    </div>
    <van-button type="primary" block @click="onBsubmit">立即结算</van-button>
  </van-action-sheet>
</template>
<script>
  import { showNotify, showConfirmDialog, showSuccessToast } from 'vant'
  export default {
    data() {
      return {
        info: {},
        proid: 0,
        LoginAuth: {},
        status: false,
        show: false,
        num: 1,
      }
    },
    created() {
      this.proid = this.$route.query.proid
      console.log(this.proid)
      this.LoginAuth = this.$cookies.get('LoginAuth') ? this.$cookies.get('LoginAuth') : {}

      this.getProductInfo()
    },
    methods: {
      async getProductInfo() {
        let data = {
          proid: this.proid,
        }
        // console.log(data)
        if (this.LoginAuth.id) {
          data.busid = this.LoginAuth.id
        }

        let result = await this.$api.ProductInfo(data)

        if (result.code === 0) {
          showNotify({
            type: 'warning',
            message: result.msg,
            duration: 1500,
            onClose: () => {
              this.$router.go(-1)
            },
          })
          return false
        }

        this.info = result.data

        this.status = result.data.CollStatus
      },

      onBack() {
        this.$router.go(-1)
      },
      // 立刻结算商品传商品id和商品数量
      onBsubmit() {
        let productinfo = {
          proid: this.proid,
          num: this.num,
        }
        this.$cookies.set('productinfo', productinfo)

        this.$router.push({ path: '/order/cart/confirm', query: { action: 'Buy' } })
      },
      onChange() {},
      // 收藏功能
      async onColle() {
        if (JSON.stringify(this.LoginAuth) === '{}') {
          showNotify({
            type: 'warning',
            message: '请先登录',
            duration: 1500,
            onClose: () => {
              showConfirmDialog({
                title: '登录',
                message: '是否需要登录？',
              })
                .then(() => {
                  this.$router.push({ path: '/business/base/login', query: { action: 'info' } })
                })
                .catch(() => {})
            },
          })

          return false
        }

        let data = {
          busid: this.LoginAuth.id,
          proid: this.proid,
        }

        let result = await this.$api.ProductCollection(data)

        if (result.code === 1) {
          if (result.data.status) {
            this.status = true
          } else {
            this.status = false
          }

          showSuccessToast({
            message: result.msg,
            duration: 1500,
          })
        } else {
          showNotify({
            type: 'warning',
            message: result.msg,
            duration: 1500,
            onClose: () => {
              if (result.data.action == 'login') {
                this.$cookies.remove('LoginAuth')
                this.$router.push('/business/base/login')
              }
            },
          })
        }
      },
      async onCart() {
        // 判断是否没有登录
        if (JSON.stringify(this.LoginAuth) === '{}') {
          showFailToast({
            message: '请先登录',
            duration: 1000,
            onClose: () => {
              showConfirmDialog({
                title: '登录',
                message: '是否需要登录?',
              })
                .then(() => {
                  this.$router.push({ path: '/business/base/login', query: { action: 'ino' } })
                })
                .catch(() => {})
            },
          })

          return false
        }

        // 组装数据
        let data = {
          proid: this.proid,
          busid: this.LoginAuth.id,
        }

        let result = await this.$api.CartAdd(data)

        if (result.code === 1) {
          showSuccessToast({
            message: result.msg,
            duration: 1000,
          })

          return false
        } else {
          showNotify({
            type: 'warning',
            message: result.msg,
            duration: 1500,
          })
        }
      },
      // 直接购买打开弹窗
      async onBuy() {
        // 判断是否登录
        if (JSON.stringify(this.LoginAuth) === '{}') {
          showFailToast({
            message: '请先登录',
            duration: 1000,
            onClose: () => {
              showConfirmDialog({
                title: '登录',
                message: '是否需要登录?',
              })
                .then(() => {
                  this.$router.push({ path: '/business/base/login', query: { action: 'ino' } })
                })
                .catch(() => {})
            },
          })

          return false
        }

        // 点击确认 关闭弹出窗口
        this.show = true
        // 直接购买时的数据
      },
    },
    computed: {},
  }
</script>
<style>
  .content {
    padding: 16px 16px 160px;
  }
  .detail{
    margin-top: 10px;
    text-indent: 10px;
    font-size: 1rem;
    font-weight: 600;
  }
</style>
